<template>
  <div class="box" @click="change">
    <div
      v-if="!disabled"
      style="margin-right: 10px;"
      :class="`radio ${checked ? 'radioSelect' : 'radioNot'}`"
    >
      <div
        class="dot"
        :style="`backgroundColor:${checked ? '#EDF2F8' : '#fff'}`"
      />
    </div>
    <div
      v-if="disabled"
      style="margin-right: 10px;"
      :class="`disradio ${checked ? 'disradioSelect' : 'disradioNot'}`"
    >
      <div :class="`dot ${disabled ? 'dotDisabled' : ''}`" />
    </div>
    <slot>
      <div
        :class="
          `text ${disabled ? 'textDisabled' : checked ? 'textChecked' : ''}`
        "
        v-if="label && label !== ''"
      >
        {{ label }}
      </div>
    </slot>
  </div>
</template>

<script>
/**
 * @interface props
 *    @param label String radio描述
 *    @param checkd Boolean redio是否选中
 *    @param disabled String radio是否禁用
 *
 * @method change
 *    change = (e:Boolean,params:any)=>void // 触发回调 e 参数 params target radio参数
 */
export default {
  name: 'DRadio',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    checked: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    change() {
      if (!this.disabled) {
        this.$emit('change', !this.checked);
        this.$emit('update:checked', !this.checked);
      }
    },
    blur() {
      this.$emit('blur');
    },
    focus() {
      this.$emit('focus');
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  display: inline-block;
  height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.1s linear;
  box-sizing: border-box;
  cursor: pointer;
}
.radioNot {
  border: 1px solid #ddd;
  background-color: #ffffff;
}
.radioSelect {
  border: 1px solid #2174e1;
  background-color: #2174e1;
}
.disradio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.1s linear;
  box-sizing: border-box;
  cursor: not-allowed;
}
.disradioNot {
  border: 1px solid #cccccc;
  background-color: #ddd;
}
.disradioSelect {
  border: 1px solid #cccccc;
  background-color: #cccccc;
}
.radio:hover {
  border: 1px solid #2174e1;
}
.textChecked {
  color: #333333;
  font-weight: 500;
}
.text {
  font-size: 14px;
  color: #666666;
}
.textDisabled {
  color: #cccccc;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
}
.dotDisabled {
  background-color: #ddd;
}
</style>
